<template>
	<view class="wrapper">
		<up-navbar placeholder autoBack title="字号调整" bgColor="rgba(0,0,0,0)" left-icon-size="24"></up-navbar>
		<div class="main">
			<view class="flex-end cfff mb50 duihua">
				<div :style="`font-size:${size}rpx`" class=" t-box text">可以调整字号大小吗?</div>
			</view>
			<div class="mb50 bfff answer-box c333 duihua">
				<div class=" mb20 text" :style="`font-size:${size}rpx;`">你这个问题不好回答啊，我是人工智能，你这个问题不好回答啊，我是人工智能 你这个问题不好回答啊，我是人工智能</div>
			</div>
		</div>
		<div class="posf bottom">
			<div class="f28 mb45 tCenter">您可以通过拖拽滑块来调整字体大小并实时预览</div>
			<div class="center title ">
				<div class="f24 posr small tCenter">A</div>
				<div class="f28 posr"><span class="left">标准</span></div>
				<div class="flex1"></div>
				<div class="f36 posr tCenter">A</div>
			</div>
			<up-slider height="6rpx" blockSize="45rpx" inactiveColor="#EEEEEE" activeColor="#EEEEEE" :step="1"
				v-model="size" :min="24" :max="36"></up-slider>
			<image src="../../static/btn.png" mode="widthFix" class="btn" @click="confirm"></image>
		</div>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import useAiStore from '@/store/modules/index'
	import {
		storeToRefs
	} from 'pinia'
	import {
		ref,
		getCurrentInstance
	} from 'vue'

	const AiStore = useAiStore()
	const {
		fontSize
	} = storeToRefs(AiStore)

	const size = ref(fontSize.value.replace('rpx', ''))

	const {
		proxy
	} = getCurrentInstance()

	function confirm() {
		fontSize.value = size.value + 'rpx'
		proxy.back(1)
	}

	onLoad((option) => {

	});

	onShow(() => {

	});
</script>

<style lang="scss" scoped>
	.main{
		padding: 130rpx 20rpx 200rpx;
		// width: 750rpx;
		.duihua{
			width: 706rpx;
			.text{
				max-width: 706rpx;
			}
		}
		.t-box {
			background: #EE7C4B;
			box-shadow: 3rpx 0rpx 21rpx 0rpx rgba(198, 198, 198, .4);
			border-radius: 25rpx 0rpx 25rpx 25rpx;
			padding: 35rpx;
			display: inline-block;
			// line-height: 102rpx;
		}
		.answer-box {
			padding: 35rpx 30rpx 30rpx;
			box-shadow: 3rpx 0rpx 8rpx 0rpx rgba(198, 198, 198, .4);
			border-radius: 0rpx 25rpx 25rpx 25rpx;
		}
	}
	.left {
		position: relative;
		left: -0rpx;
	}

	.title .posr::after {
		content: '';
		width: 10rpx;
		height: 28rpx;
		background: #EEEEEE;
		border-radius: 5rpx 5rpx 5rpx 5rpx;
		position: absolute;
		left: 25rpx;
		top: 45rpx;
	}

	.title .posr {
		height: 36rpx;
		width: 60rpx;
	}

	.btn {
		width: 549rpx;
		height: 147rpx;
		display: block;
		margin: 30rpx auto 0;
	}

	.small {
		margin-right: 163rpx;
	}

	.bottom {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 25rpx 25rpx 0rpx 0rpx;
		left: 0;
		bottom: 0;
		padding: 77rpx 51rpx 33rpx;
	}

	::v-deep .u-navbar__content__title {
		font-size: 34rpx;
	}
</style>